<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

    <link href="../../static/bootstrap-3.3.7/css/bootstrap.min.css" th:href="@{bootstrap-3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <script src="../../static/bootstrap-3.3.7/js/jquery-1.11.3.min.js" th:src="@{bootstrap-3.3.7/js/jquery-1.11.3.min.js}" type="text/javascript"></script>
    <script src="../../static/bootstrap-3.3.7/js/bootstrap.min.js" th:src="@{bootstrap-3.3.7/js/bootstrap.min.js}" type="text/javascript"></script>

    <style type="text/css">
        .circle {
            margin-top: 3px;
            width: 14px;
            height: 14px;
            background: #dbdbdb;
            border-radius: 50%;
            border: 1px solid #dbdbdb;
        }

        .main{
            border: 1px solid #ff3f34;
            background-color: #F8EFBA;
        }

        li{
            float: left;
            display:block; /* 将链接设为块级元素 */
            width:30px; /* 设置宽度 */
            height:25px; /* 设置高度 */
            line-height:28px;  /*设置行高，将行高和高度设置同一个值，可以让单行文本垂直居中 */
            text-align:center; /* 居中对齐文字 */
            background:#f39c12; /* 设置背景色 */
            color:#fff; /* 设置文字颜色 */
            text-decoration:none; /* 去掉下划线 */
            /* border-right:1px solid #000; 在左侧加上分隔线 */
            margin-right: 2px;  /*对win IE设置半透明滤镜效果，filter:alpha(Opacity=80)代表该对象80%半透明，火狐浏览器不认*/
            filter:alpha(Opacity=80);   /*对mozilla firefox火狐浏览器实现半透明，win IE不认此属性，-moz-opacity:0.5相当于设置半透明为50%/
            -moz-opacity:0.5;   /*对除IE外所有浏览器支持包括谷歌，放最后主要针对谷歌浏览器，opacity: 0.5;表示设置50%半透明*/
            opacity: 0.5;
        }

    </style>
</head>
<body>
<!--  	描述：导航条    -->
<nav class="navbar navbar-default" role="navigation" style="background-color: #ffffff; height: 80px;margin-bottom: 0px">
    <div class="container">
        <div class="row">
            <div class="navbar-header">
                <a class="navbar-brand" href="">
                    <i style="display: inline-block;background-color: #5cb85c; width: 150px;height:50px; background: url(../../static/img/bg/piaodekuai.png) no-repeat center; background-size: 100px 50px; "></i>
                    <!-- <span style="color:#0652DD; font-size:30px;width: 30px;">飘得快</span>-->
                </a>
            </div>
            <!--<div class="nav navbar-nav" style="width: 80%;padding-top: 25px;padding-left: 80px">
                <a href=""><span style="float: left;font-size: 20px">首页&nbsp;</span></a>
                <div style="float: left;border-bottom: 1px solid #dbdbdb;width: 30%;margin-top: 15px;"></div>
                <span style="color: #ffa801;float: left;font-size: 20px">&nbsp;&nbsp;登录中心</span>
            </div>-->
            <div class="nav navbar-nav navbar-right" style="padding-top: 25px; margin-right: 0px">
            </div>
        </div>
    </div>
</nav>


<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div style="padding-top: 35px; padding-left: 20px;">
                <div style="float: left;border-bottom: 5px solid #2ecc71;width: 280px;margin-top: 8px;"></div>
                <div class="circle" style="float: left;background-color: #2ecc71; border-color: #2ecc71"></div>
                <span style="color: #747d8c ;float: left">&nbsp;验证手机&nbsp;&nbsp;&nbsp;</span>
                <div style="float: left;border-bottom: 5px solid #2ecc71;width: 280px;margin-top: 8px;"></div>
                <div class="circle" style="float: left;background-color: #2ecc71; border-color: #2ecc71"></div>
                <span style="color: #747d8c;float: left">&nbsp;设置密码&nbsp;&nbsp;&nbsp;</span>
                <div style="float: left;border-bottom: 5px solid #dbdbdb;width: 280px;margin-top: 8px;"></div>
                <div class="circle" style="float: left;"></div>
                <span style="color: #747d8c;float: left">&nbsp;注册成功</span>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-offset-1 col-md-7" style="margin-top: 60px">
            <form class="form-horizontal" role="form" action="/registersucc" method="post" name="form">
                <div class="form-group">
                    <span  class="col-sm-3 control-label">注册手机号</span>
                    <div style=" padding-top: 7px">
                        <span style="color: #57606f; font-size: 13px;padding-left: 10px; ">86-135****1111</span>
                    </div>
                </div>
                <div class="form-group">
                    <span for="password" class="col-sm-3 control-label">密码</span>
                    <input type="password" id="password" autocomplete="off" style="width:300px; height: 39px;
                        outline:none;padding-left: 10px" value="" maxlength="12" placeholder="8-12位字母、数字和符号">
                    <ul style="float: right;margin-right: 60px;padding-left: 0px;margin-top: 5px;">
                        <li id="strongpwd1">弱</li>
                        <li id="strongpwd2">中</li>
                        <li id="strongpwd3">强</li>
                        <li id="strongpwd4">牛</li>
                    </ul>
                    <div>
                        <!--<div class="col-sm-offset-3" style="background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6">
                            <span class="glyphicon glyphicon-remove" style="color: #e84118; font-size: 8px"></span>
                            <span  style="font-size: 11px; color: #636e72">密码长度不能少于6位数</span>
                        </div>-->
                    </div>
                </div>
                <div class="form-group">
                    <span for="password2" class="col-sm-3 control-label">确认密码</span>
                    <input type="password" id="password2" autocomplete="off" style="width:300px; height: 39px;outline:none;padding-left: 10px" value="" placeholder="再次输入密码">
                    <div>
                        <!--<div class="col-sm-offset-3" style="background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6">
                            <span class="glyphicon glyphicon-remove" style="color: #e84118; font-size: 8px"></span>
                            <span  style="font-size: 11px; color: #636e72">请输入手机号码</span>
                        </div>-->
                    </div>
                </div>
                <div class="form-group">

                    <div class="col-sm-offset-3">
                        <button id="complete" type="submit" class="btn btn-warning" style="width: 200px">完 成</button>
                    </div>
                </div>
            </form>

            <div style="padding-left: 105px">
                <a href="#" style="text-decoration:none;">注册遇见问题？</a>
            </div>
            <div style="padding-left: 105px;padding-top: 80px">
                <a href="javascript :;" onClick="javascript :history.go(-1);" style="color: #57606f; text-decoration:none;">&lt;&nbsp;返回上一步</a>

            </div>
        </div>
    </div>



</div>



<script type="text/javascript">

   /* $('#complete').click(function () {
        location.href="/registersucc";
    });*/

    $(function() {
        //var aStr = ["弱", "中", "强", "牛逼"];

        var i = 0;
        var j = 0;

        function checkStrong(val) {
            var modes = 1;
            if (val.length == 0) return 0;
            if (val.length > 0 && val.length < 8) return 1;
            if (/\d/.test(val)) modes++; //数字
            if (/[a-z]/.test(val)) modes++; //小写
            if (/[A-Z]/.test(val)) modes++; //大写
            if (/\W/.test(val)) modes++; //特殊字符
            if (val.length > 12) return 5;
            return modes;
        };
        $("#password").blur(function() {
            i = 0;
            var val = $(this).val();
            //$("p").text(val.length);
            var num = checkStrong(val);
            switch (num) {
                case 0:
                    $("#password").next().next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                        "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                        "                            <span  style=\"font-size: 11px; color: #636e72\">请设置登录密码</span>\n" +
                        "                        </div>");
                    $("li").css({"filter":"alpha(Opacity=80","-moz-opacity":"0.5","opacity":"0.5"});
                    break;
                case 1:
                    $("#password").next().next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 250px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                        "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                        "                            <span  style=\"font-size: 11px; color: #636e72\">密码需为8-20位,最好为字母、数字和符号的组合</span>\n" +
                        "                        </div>");
                    $("li").css({"filter":"alpha(Opacity=80","-moz-opacity":"0.5","opacity":"0.5"});
                    break;
                case 2:
                    $("#password").next().next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                        "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                        "                            <span  style=\"font-size: 11px; color: #636e72\">密码过于简单</span>\n" +
                        "                        </div>");
                    $("#strongpwd1").css({"filter":"alpha(Opacity=100","-moz-opacity":"1","opacity":"1"});
                    break;
                case 3:
                    i++;
                    $("#password").next().next().html("");
                    //$("#strongpwd1").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
                    //$("#strongpwd1").css({"filter":"alpha(Opacity=80","-moz-opacity":"0.5","opacity":"0.5"});
                    $("#strongpwd1").css({"filter":"alpha(Opacity=100","-moz-opacity":"1","opacity":"1"});
                    $("#strongpwd2").css({"filter":"alpha(Opacity=100","-moz-opacity":"1","opacity":"1"});
                    break;
                case 4:
                    i ++;
                    $("#password").next().next().html("");
                    //$("#strongpwd2").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
                    $("#strongpwd1").css({"filter":"alpha(Opacity=100","-moz-opacity":"1","opacity":"1"});
                    $("#strongpwd2").css({"filter":"alpha(Opacity=100","-moz-opacity":"1","opacity":"1"});
                    $("#strongpwd3").css({"filter":"alpha(Opacity=100","-moz-opacity":"1","opacity":"1"});
                    break;
                case 5:
                    i ++;
                    $("#password").next().next().html("");
                    //$("#strongpwd3").css('background', 'green').text('').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
                    $("li").css({"filter":"alpha(Opacity=100","-moz-opacity":"1","opacity":"1"});
                    break;
                default:
                    break;
            }
        })

        $("#password2").blur(function(){
            var val = $("#password").val();
            var val2 = $(this).val();

            //$("p").text(val.length);
            var num = checkStrong(val);
            j = 0;
            //alert(val + val2);
            //var num = checkStrong(val);
            if(num == 2){
                return false;
            }else if(val2.length == 0){
                $("#password").next().next().html("");
                $("#password2").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请再次输入密码</span>\n" +
                    "                        </div>");
            }else if(val2 != val){
                $("#password").next().next().html("");
                j = 0;
                $("#password2").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">您两次输入的密码不一致</span>\n" +
                    "                        </div>");
            }else {
                j++;
            }

        })


        $("#complete").click(function(){
            var val = $("#password").val();
            var val2 = $("#password2").val();
            var sum = i + j;
            if(val.length == 0){
                $("#password").next().next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请设置登录密码</span>\n" +
                    "                        </div>");
                return false;
            }else  if(val2.length == 0){
                $("#password2").next().html("<div class=\"col-sm-offset-3\" style=\"background-color:#F8EFBA; width: 200px; padding-left: 5px; margin-top: 5px; border: 1px solid #7f8fa6\">\n" +
                    "                            <span class=\"glyphicon glyphicon-remove\" style=\"color: #e84118; font-size: 8px\"></span>\n" +
                    "                            <span  style=\"font-size: 11px; color: #636e72\">请再次输入密码</span>\n" +
                    "                        </div>");
                return false;
            } else if(sum < 2){
                return false
            }else {
                /*document.form.action = "http://www.baidu.com";
                document.form.submit();
                return true;*/
                location.href="/registersucc";
            }

        })

    })



</script>






</body>
</html>